<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<title>日常任务执行记录</title>
		<link rel="stylesheet" href="./Package/css/dailyRecord.css">
		<link rel="stylesheet" href="./Package/element/element.css">
		<link rel="stylesheet" type="text/css" href="./Package/css/iconfont.css" />

		<script src="./Package/js/config.js"></script>
		<style type="text/css">
			body,
			html,
			#app {
				width: 100%;
				height: 100%;
				overflow: hidden;
				margin: 0;
				font-family: "微软雅黑";
				background: #e4e5ea;
			}
			
			[v-cloak] {
				display: none;
			}
		</style>
	</head>

	<body>
		<div id="app" v-cloak>
			<div class="header">
				<div class="head-title">
					日常任务执行记录
					<div style="display: inline-block;float: right;margin-right: 35px;font-size: 17px;">
						<div class="plan-time head-box time-val">
							<div>{{ nowdatatime }}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="content">
				<el-form ref="form" :model="form" :inline="true" label-width="80px" style="padding-top: 10px;">
					<el-form-item label="事件类型">
						<el-select v-model="form.dailyTaskEventId" clearable placeholder="请选择事件类型">
							<el-option v-for="(item,index) in eventlist" :key="index" :label="item.eventName" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="时间范围" style="width: 565px;">
						<el-col :span="11">
							<el-date-picker type="datetime" placeholder="选择开始时间" v-model="form.startTime" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;"></el-date-picker>
						</el-col>
						<el-col class="line" :span="2" style="text-align: center;">--</el-col>
						<el-col :span="11">
							<el-date-picker type="datetime" placeholder="选择结束时间" v-model="form.taskEndTime" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;"></el-date-picker>
						</el-col>
					</el-form-item>
					<el-form-item label="组织部门">
						<el-input v-model="form.organization" @focus="outerVisible = true" placeholder="请选择内容">
							<el-button slot="append" @click="clearorg">清空</el-button>
						</el-input>
					</el-form-item>
					<el-form-item label="人员名称">
						<el-input v-model="form.persons" @focus="outerVisible1 = true" placeholder="请选择人员名称">
							<el-button slot="append" @click="clearpre">清空</el-button>
						</el-input>
					</el-form-item>
					<el-form-item>
				    <el-button type="primary" @click="getlist">查询</el-button>
				  </el-form-item>
				</el-form>
				<el-dialog title="组织部门" :visible.sync="outerVisible" width="500px" top="200px">
					<el-input placeholder="输入关键字进行过滤" v-model="filterText">
					</el-input>

					<el-tree class="filter-tree" :data="treelist" :props="defaultProps" @check-change="handleClick" node-key="id" check-strictly accordion show-checkbox :filter-node-method="filterNode" ref="tree">
					</el-tree>
					<div slot="footer" class="dialog-footer">
						<el-button @click="outerVisible = false">取 消</el-button>
						<el-button type="primary" @click="getCheckedNodes">保存</el-button>
					</div>
				</el-dialog>
				<el-dialog title="人员选择" :visible.sync="outerVisible1" width="500px" top="200px">
					<el-input placeholder="输入关键字进行过滤" v-model="filterText1">
					</el-input>

					<el-tree class="filter-tree" :data="persontreelist" :props="defaultProps1" node-key="id" accordion show-checkbox :filter-node-method="filterNode" ref="tree1">
					</el-tree>
					<div slot="footer" class="dialog-footer">
						<el-button @click="outerVisible1 = false">取 消</el-button>
						<el-button type="primary" @click="getCheckedNodes1">保存</el-button>
					</div>
				</el-dialog>
				<div class="contentbox">
					<div class="zadanie boxs">
						<p class="content-title">定时任务</p>
						<el-card shadow="always" style="text-align: center;">
							<el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total" @current-change="handleCurrentChange">
							</el-pagination>
						</el-card>
						<div style="width: 100%;padding: 10px 20px 20px;height: 77%;overflow-y: auto;">
							<div v-for="(item, index) in list" :key="index" @click="cardzadanie(item, index)" style="margin: 10px 0;cursor: pointer;">
								<el-card shadow="always">
									<span v-if="index == zadanienum" class="card-icon1"><i class="iconfont icon-danxuanfangdiancg" style="margin-right: 5px;"></i></span>
									<span v-if="index != zadanienum" class="card-icon2"><i class="iconfont icon-danxuanfangdiancg" style="margin-right: 5px;"></i></span>
									<span class="card-tit">{{ item.eventName }}</span>
									<span class="card-type0" v-if="item.taskPerformType == 0">立即执行</span>
									<span class="card-type1" v-if="item.taskPerformType == 1">单次执行</span>
									<span class="card-type2" v-if="item.taskPerformType == 2">定时执行</span>
									<p class="card-p">{{ item.taskRemark }}</p>
								</el-card>
							</div>
							<!--<el-pagination
							  background
							  layout="prev, pager, next"
							  :total="100" style="margin-top: 20px;">
							</el-pagination>-->
						</div>
					</div>
					<div class="record boxs">
						<p class="content-title">任务记录</p>
						<el-card shadow="always" style="text-align: center;">
							<el-pagination background layout="prev, pager, next" :page-size="pageSize1" :total="total1" @current-change="handleChange">
							</el-pagination>
						</el-card>
						<div style="width: 100%;padding: 10px 20px 20px;height: 82%;overflow-y: auto;">
							<div v-for="(item, index) in recordlist" :key="index" @click="cardrecord(item, index)" style="margin: 10px 0;cursor: pointer;">
								<el-card shadow="always">
									<span v-if="index == recordnum" class="card-icon1"><i class="iconfont icon-danxuanfangdiancg" style="margin-right: 5px;"></i></span>
									<span v-if="index != recordnum" class="card-icon2"><i class="iconfont icon-danxuanfangdiancg" style="margin-right: 5px;"></i></span>
									<span class="card-tit">{{ item.createTime }}</span>
									<p class="card-p">{{ item.sendContent }}</p>
								</el-card>
							</div>
							<!--<el-pagination
							  background
							  layout="prev, pager, next"
							  :total="100" style="margin-top: 20px;">
							</el-pagination>-->
						</div>
					</div>
					<div class="person boxs">
						<p class="content-title">执行人员</p>
						<div style="width: 100%;padding: 10px 20px 20px;height: 82%;overflow-y: auto;">
							<!--<div v-for="(item, index) in personlist" :key="index" @click="cardrecord(item, index)" style="margin: 10px 0;cursor: pointer;width: 45%;display: inline-block;">
						    <el-card shadow="always">
						      <p class="card-tit" style="text-align: center;">{{ item.person.name }}</p>
						      <p class="card-tit" style="text-align: center;">{{ item.person.phone }}</p>
						    </el-card>
						  </div>-->
							<el-row :gutter="20">
								<el-col v-for="(item, index) in personlist" :key="index" :span="12" style="cursor: pointer;margin: 10px 0;">
									<div @click="cardperson(item, index)">
										<el-card v-if="index == personnum" style="color: #ff5401;" shadow="always">
											<p class="card-tit" style="text-align: center;">{{ item.person.name }}</p>
											<p class="card-tit" style="text-align: center;">{{ item.person.phone }}</p>
										</el-card>
										<el-card v-if="index != personnum" shadow="always">
											<p class="card-tit" style="text-align: center;">{{ item.person.name }}</p>
											<p class="card-tit" style="text-align: center;">{{ item.person.phone }}</p>
										</el-card>
										<!--<div class="lt"></div>
				            <div class="rt"></div>			
				            <div class="rb"></div>			
				            <div class="lb"></div>-->
									</div>
								</el-col>
							</el-row>
						</div>
					</div>
					<div class="feedback-record boxs">
						<p class="content-title">反馈记录</p>
						<div style="width: 100%;padding: 10px 20px 20px;height: 82%;overflow-y: auto;">
							<div class="block">
								<el-timeline>
									<el-timeline-item v-for="(item, index) in feedbacklist" :key="index" color="#0bbd87" :timestamp="item.createTime" placement="top">
										<el-card>
											<h4 style="width: 65px;display: inline-block;">{{item.disposalTitle}} :</h4>
											<p style="display: inline-block;margin-bottom: 10px;">{{item.contentFeedback}}</p>
											<div>
												<template v-for="(data,i) in item.imageListOb">
													<el-image style="width:100px;height: 100px" :src="data" :preview-src-list="item.imageListOb" fit="contain"></el-image>
												</template>
												<template v-for="(data,i) in item.voiceListOb">
													<audio controls="controls">
														<source :src="data" type="audio/mp3" />
													</audio>
												</template>
											</div>
										</el-card>
									</el-timeline-item>
								</el-timeline>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>

</html>

<script src="./Package/js/vue.js"></script>
<script src="./Package/js/index.js"></script>
<script src="./Package/element/element.js"></script>
<script src="./Package/js/jquery-1.7.2.js"></script>

<script type="text/javascript">
	var vm = new Vue({
		el: "#app",
		data: {
			list: [],
			eventlist: [],
			recordlist: [],
			personlist: [],
			feedbacklist: [],
			zadanienum: 0,
			recordnum: 0,
			personnum: 0,
			pageNum: 1,
			pageSize: 5,
			pageNum1: 1,
			pageSize1: 5,
			total: 0,
			total1: 0,
			selzadanie: '',
			selrecord: '',
			selperson: '',
			httpimg: httpimg,
			form: {
				dailyTaskEventId: null,
				startTime: null,
				taskEndTime: null,
				personIdList: [],
				persons: null,
				organizationId: null,
				organization: null,
			},
			outerVisible: false,
			filterText: '',
			outerVisible1: false,
			filterText1: '',
      treelist: [],
      persontreelist: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      defaultProps1: {
        children: 'children',
        label: 'name'
      },
      nowdatatime: ''
		},

		mounted() {
			//			this.id = this.getQueryString('id');			
//			this.login();
			this.getdata();
			this.gettree();
		},
		watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      },
      filterText1(val) {
        this.$refs.tree1.filter(val);
      }
    },
		methods: {
			filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
    	},
			getCheckedNodes() {
				var dataa = this.$refs.tree.getCheckedNodes();
				console.log(dataa)
				if(dataa.length > 0){
					this.form.organization = dataa[0].name;
					this.form.organizationId = dataa[0].id;
					this.outerVisible = false;		
				}else if(dataa.length == 0){
					this.form.organization = null;
					this.form.organizationId = null;
					this.outerVisible = false;
				}
			},
			clearorg(){
				this.form.organization = null;
				this.form.organizationId = null;
				this.$refs.tree.setCheckedNodes([])
			},
			handleClick(data, checked, node) {
				if(checked) {
					this.$refs.tree.setCheckedNodes([data]);
				}
			},
			filterNode1(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
     	},
			getCheckedNodes1() {
				var dataa = this.$refs.tree1.getCheckedNodes();
				console.log(dataa)
				var arr = [];
				this.form.personIdList = [];
				for(var i=0;i<dataa.length;i++){
					if(dataa[i].children == null) {
						this.form.personIdList.push(dataa[i].id);
						arr.push(dataa[i].name);
					}		
				}
				this.form.persons = arr.join(',');
				this.outerVisible1 = false;
			},
			clearpre(){
				this.form.persons = null;
				this.form.personIdList = [];
				this.$refs.tree1.setCheckedNodes([])
			},
			cardperson(item, index) {
				this.personnum = index;
				this.selperson = item.id;
				$.ajax({
					type: 'get',
					url: httpurl + 'schedule/manager/dailyTaskInfo/getDailyTaskInfo/' + item.id,
					dataType: 'json',
					headers: {
						Authorization: localStorage.getItem('token')
					},
					success: function(data) {
						console.log(data);
						vm.feedbacklist = data.data;
						for(var i = 0; i < vm.feedbacklist.length; i++) {
							if(vm.feedbacklist[i].imageListOb) {
								for(var j = 0; j < vm.feedbacklist[i].imageListOb.length; j++) {
									vm.feedbacklist[i].imageListOb[j] = httpimg + vm.feedbacklist[i].imageListOb[j]
								}
							}
							if(vm.feedbacklist[i].voiceListOb) {
								for(var j = 0; j < vm.feedbacklist[i].voiceListOb.length; j++) {
									vm.feedbacklist[i].voiceListOb[j] = httpimg + vm.feedbacklist[i].voiceListOb[j]
								}
							}
						}
					}
				})
			},
			cardrecord(item, index) {
				this.recordnum = index;
				this.selrecord = item.id;
				$.ajax({
					type: 'get',
					url: httpurl + 'schedule/manager/sendPerson/getTaskSendPersonAll/' + item.id,
					dataType: 'json',
					headers: {
						Authorization: localStorage.getItem('token')
					},
					success: function(data) {
						console.log(data);
						vm.personlist = data.data;
						vm.cardperson(vm.personlist[0], 0)
					}
				})
			},
			cardzadanie(item, index) {
				this.zadanienum = index;
				this.selzadanie = item;
				$.ajax({
					type: 'get',
					url: httpurl + 'schedule/manager/dailyTaskSendInfo/list?pageNum=' + this.pageNum1 + '&pageSize=' + this.pageSize1 + '&dailyTaskId=' + item.id,
					dataType: 'json',
					headers: {
						Authorization: localStorage.getItem('token')
					},
					success: function(data) {
						console.log(data);
						vm.recordlist = data.rows;
						vm.total1 = data.total;
						if(vm.recordlist.length > 0){
							vm.cardrecord(vm.recordlist[0], 0)
						}else{
							vm.personlist = [];
							vm.feedbacklist = [];
						}
					}
				})
			},
			getdata() {

				$.ajax({
					type: 'get',
					url: httpurl + 'schedule/manager/dailyTaskEvent/getDailyTaskAll',
					dataType: 'json',
					headers: {
						Authorization: localStorage.getItem('token')
					},
					success: function(data) {
						console.log(data)
						vm.eventlist = data.data;
						vm.getlist()
					}
				})
			},
			getlist() {

				$.ajax({
					type: 'post',
					url: httpurl + 'schedule/manager/dailyTask/taskQueryList?pageNum=' + this.pageNum + '&pageSize=' + this.pageSize,
					dataType: 'json',
					headers: {
						Authorization: localStorage.getItem('token')
					},
					data: JSON.stringify(this.form),
					contentType: 'application/json',
					success: function(data) {
						console.log(data);
						vm.list = data.rows;
						vm.total = data.total;
						for(var i = 0; i < vm.eventlist.length; i++) {
							for(var j = 0; j < vm.list.length; j++) {
								if(vm.eventlist[i].id == vm.list[j].dailyTaskEventId) {
									vm.list[j].eventName = vm.eventlist[i].eventName
								}
							}
						}
						if(vm.list.length > 0){
							vm.cardzadanie(vm.list[0], 0);
						}else{
							vm.recordlist = [];
							vm.personlist = [];
							vm.feedbacklist = [];
						}						
					}
				})
			},
			handleCurrentChange(val) {
				console.log(val);
				this.pageNum = val;
				this.getdata();
			},
			handleChange(val) {
				console.log(val);
				this.pageNum1 = val;
				this.cardzadanie(this.selzadanie, this.zadanienum);
			},
			gettree() {
				$.ajax({
					type: 'get',
					url: httpurl + 'person/personInfo/getPersonTree',
					dataType: 'json',
					headers: {
						Authorization: localStorage.getItem('token')
					},
					success: function(data) {
						console.log(data)
						vm.persontreelist = data.data;
					}
				})
				$.ajax({
					type: 'post',
					url: httpurl + 'person/personInfo/getGroupTree',
					dataType: 'json',
					headers: {
						Authorization: localStorage.getItem('token')
					},
					data: JSON.stringify({
						"isOrganization": 1
					}),
					contentType: 'application/json',
					success: function(data) {
						console.log(data)
						vm.treelist = data.data;
					}
				})
			},
			// 登陆系统获取token
			login() {

				$.ajax({
					type: 'POST',
					url: httpurl + 'login',
					data: JSON.stringify({
						password: "123456",
						username: "nd01",
						uuid: "312a410708cb49c19673f75b4e4bca67",
					}),
					contentType: "application/json",
					dataType: 'json',
					success: function(data) {
						// 成功的回调
						console.log(data)

						if(data.code == 200) {
							localStorage.setItem('token', data.token)
							vm.getdata();
							vm.gettree()
						}

					},
					error: function(err) {
						// 失败的回调
						console.log(err)
					}
				})
			},
			getQueryString(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				var r = window.location.search.substr(1).match(reg);
				if(r != null) return unescape(r[2]);
				return null;
			}
		},
		// 侦听器
		watch: {
			filterText(val) {
				this.$refs.tree.filter(val);
			}
		},
	})
</script>
<script>
		//页面加载调用
		window.onload = function() {
			//每1秒刷新时间
			setInterval("NowTime()", 1000);
		}

		function NowTime() {
			//获取年月日
			var time = new Date();
			var year = time.getFullYear();
			var month = time.getMonth();
			var day = time.getDate();
			//获取时分秒
			var h = time.getHours();
			var m = time.getMinutes();
			var s = time.getSeconds();
			//检查是否小于10
			h = check(h);
			m = check(m);
			s = check(s);
			//星期
			var a = ["日", "一", "二", "三", "四", "五", "六"];
			var week = new Date().getDay();
			vm.nowdatatime = year + "-" + check(month*1+1) + "-" + check(day) + ' ' + h + ":" + m + ":" + s;
		}
		//时间数字小于10，则在之前加个“0”补位。
		function check(i) {
			var num;
			i < 10 ? num = "0" + i : num = i;
			return num;

			//方法二，if语句判断
			//if(i<10){
			//    i="0"+i;
			//}
			//return i;
		}
	</script>